<div th:replace="~{ app :: layout ('用户注册', _, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
    <div id="main" class="container my-2rem">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">注册</div>

                    <div class="card-body">
                        <p class="text-center text-muted font-size-12"><span class="text-primary">已有账号？</span>直接登录</p>
                        <p class="text-center">
                            <a class="btn btn-outline-primary" href="#" th:href="@{/login}" role="button">
                                <i class="bi bi-fingerprint me-1"></i>
                                Login
                            </a>
                        </p>
                        <p class="mt-3 text-center text-muted font-size-12">或快速注册一个新账号</p>
                        <form method="POST" action="#" th:action="@{/user/register}" th:object="${user}">
                            <div class="row mb-3 justify-content-center">
                                <div class="col-lg-6">
                                    <input placeholder="邮箱" th:field="*{email}" id="email" type="email" class="form-control" th:class="|form-control ${#fields.hasErrors('email') ? 'is-invalid' : ''}|" name="email" required autofocus  oninput="fillUsernameFromEmail()">
                                    <span th:if="${#fields.hasErrors('email')}" class="invalid-feedback" role="alert"><strong th:errors = "*{email}"></strong></span>
                                </div>
                            </div>

                            <div class="row mb-3 justify-content-center">
                                <div class="col-lg-6">
                                    <input placeholder="用户名" th:field="*{name}" id="name" type="text" class="form-control" th:class="|form-control ${#fields.hasErrors('name') ? 'is-invalid' : ''}|" name="name" required>
                                    <span th:if="${#fields.hasErrors('name')}" class="invalid-feedback" role="alert"><strong th:errors = "*{name}"></strong></span>
                                </div>
                            </div>
                            <div class="row mb-3 justify-content-center">
                                <div class="col-lg-6">
                                    <input placeholder="密码" th:field="*{password}" id="password" type="password" class="form-control" th:class="|form-control ${#fields.hasErrors('password') ? 'is-invalid' : ''}|" name="password" required autocomplete="password">
                                    <span th:if="${#fields.hasErrors('password')}" class="invalid-feedback" role="alert"><strong th:errors = "*{password}"></strong></span>
                                </div>
                            </div>

                            <div class="row mb-0">
                            <div class="col-lg-6 offset-lg-3">
                                <button type="submit" class="btn btn-primary">
                                    注册新账号
                                </button>

                                <a class="btn btn-link font-size-12 text-muted" href="/user/password-reset">
                                    忘记密码
                                </a>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
    <script id="js">
        function fillUsernameFromEmail(){
            let emailInput = document.getElementById('email');
            let nameInput = document.getElementById('name');

            let emailValue = emailInput.value;
            let usesrname = emailValue.split("@")[0];
            nameInput.value = usesrname;
        }
    </script>
</div>